<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cont{width:400px;height: 300px;margin: 10px auto;border: solid 1px black;}
    .cont ul{margin: 0;padding: 0;list-style: none;display: flex;width: 400px;height: 30px;line-height: 30px;text-align: center;background: #ccc;}
    .cont ul li{flex: 1;border-left:solid 1px #fff;border-right:solid 1px #fff;}
    .cont ul li.active{background: red;color: #fff;}

    .cont .box>div{width: 400px;height: 270px;display: none;font-size: 50px;}
    .cont .box .msg1{background: #399;display: block;}
    .cont .box .msg2{background: #393;}
    .cont .box .msg3{background: #993;}
    .cont .box .msg4{background: #939;}
  </style>
</head>
<body>
  <div class="cont">
    <ul>
      <li class="active">选项1</li>
      <li>选项2</li>
      <li>选项3</li>
      <li>选项4</li>
    </ul>
    <div class="box">
      <div class="msg1">选项1的内容</div>
      <div class="msg2">hello world</div>
      <div class="msg3">哈哈哈</div>
      <div class="msg4">嘿嘿嘿</div>
    </div>
  </div>
</body>
<script>
  var lis = document.querySelectorAll(".cont ul li");
  var msgs = document.querySelectorAll(".cont .box>div");

  // for(var i=0;i<lis.length;i++){
  //   // 提前存储每个元素的索引
  //   lis[i].index = i;
  //   lis[i].onclick = function(){
  //     // 点击时根据当前元素，获取索引
  //     console.log(this.index);
  //   }
  // }

  // 因为循环不会受到绑定事件的阻塞
  // 在事件触发时，循环已经执行结束
  // 所以在循环内绑事件，事件处理函数内部，无法获取循环每次的计数器
  // 提前给元素添加索引属性
  // 将来拿到元素后，获取索引属性

  // ========

  // 设置默认索引，用来记录当前按钮的索引，用来被清除
  var index = 0;

  for(var i=0;i<lis.length;i++){
    // 提前存储每个元素的索引
    lis[i].index = i;
    // 绑定事件
    lis[i].onclick = function(){
      // 清除上一次点击按钮的样式
      lis[index].className = "";
      msgs[index].style.display = "none";
      // 给当前点击按钮添加样式
      this.className = "active";
      msgs[this.index].style.display = "block";
      // 将当前点击按钮的索引，保存起来，以备下次清除
      index = this.index;
    }
  }


</script>
</html>